<template>
  <div class="hello">
    <button @click="genPoints">保存路径点</button>
    <button @click="addGrid">添加网格</button>
    <button @click="addNavDoc(50, 50)">添加导航点（二维码）</button>
    <button @click="combineDoc">连通道路 {{ combineDocStatus }}</button>
    <button @click="addRoutes">添加道路</button>
    <!-- <button @click="addTrafficLine">添加线条</button> -->
    <button
      v-for="(item, index) in robotics"
      @click="addRobitic(item)"
      :key="index"
    >
      添加 {{ item.name }}
    </button>

    <button @click="logJSON">保存json</button>
    <canvas
      id="c"
      width="1280"
      height="600"
      style="border: 1px solid #ccc"
    ></canvas>

    <CanvasGen :points="points" :robots="robots"></CanvasGen>
  </div>
</template>

<script>
var targetId = "95e9a53f1c3f9143dd1899d10a29fb0e";
import {
  uuid,
  makeLine,
  makeCircle,
  makeDeleteControl,
  makeNavigationControl,
  makeNewNavPointControl,
  getObjectById,
  ConnectPointAction,
  DjPoint,
  findMinDistancePoint,
  checkInList,
} from "./util";

let width = 1280;
let height = 600;
let speed = 100; //每秒多少个像素

import { doNavTask } from "./NaviTask";

import CanvasGen from "./CanvasGen.vue";

export default {
  name: "HelloWorld",
  components: {
    CanvasGen,
  },
  data() {
    return {
      robots: [],
      points: [],
      robotics: [
        {
          id: 111,
          name: "桌子x",
          img: "tableX.png",
          width: 100,
          height: 100,
          props: { name: "tableX", static: true, z: 1.5 },
        },
        {
          id: 11,
          name: "柜子",
          img: "mbox.png",
          width: 100,
          height: 100,
          props: { static: false },
        },
        {
          id: 12,
          name: "取餐机器人",
          img: "mrobot1.png",
          width: 100,
          height: 100,
          props: { static: false },
        },
        // { id: 1, name: "Q2-400D", img: "1.png", width: 100, height: 100 },
        {
          id: 2,
          name: "充电桩",
          img: "2.png",
          width: 100,
          height: 100,
          props: { static: false },
        },
        {
          id: 32,
          name: "CleanerBotA",
          img: "CleanerBotA.png",
          width: 100,
          height: 100,
          props: { name: "CleanerBotA", static: false, z: 1.5 },
        },
        {
          id: 33,
          name: "CleanerBotE",
          img: "CleanerBotE.png",
          width: 100,
          height: 100,
          props: { name: "CleanerBotE", static: false, z: 1.5 },
        },
        {
          id: 34,
          name: "TinyRobot",
          img: "TinyRobot.png",
          width: 100,
          height: 100,
          props: { name: "TinyRobot", static: false, z: 1.5 },
        },
        {
          id: 35,
          name: "HospitalRobot",
          img: "HospitalRobot.png",
          width: 100,
          height: 100,
          props: { name: "HospitalRobot", static: false, z: 1.5 },
        },
        // { id: 3, name: "Q2-400D3", img: "3.png", width: 100, height: 100 },
        // { id: 4, name: "Q2-400D4", img: "4.png", width: 100, height: 100 },
      ],
      msg: "Welcome to Your Vue.js App",
      canvasWidth: "600",
      canvasHeight: "600",
      width: 1280,
      height: 600,
      combineDocStatus: -1, // -1 不生效 1 连接开始点 2 连接结束点
    };
  },
  methods: {
    addNavDoc(left, top) {
      let c = makeCircle(left, top, []);
      canvas.add(c);
      canvas.renderAll();
    },
    combineDoc() {
      if (this.combineDocStatus == -1) {
        cpa = new ConnectPointAction();
        let point = canvas.getActiveObject();
        cpa.startPoint = point;
        this.combineDocStatus = 1;
      } else if (this.combineDocStatus == 1) {
        let point = canvas.getActiveObject();
        cpa.endPoint = point;
        let line = makeLine(
          [
            cpa.startPoint.left,
            cpa.startPoint.top,
            cpa.endPoint.left,
            cpa.endPoint.top,
          ],
          cpa.startPoint.id,
          cpa.endPoint.id
        );
        cpa.startPoint.lines.push(line.id);
        cpa.endPoint.lines.push(line.id);
        canvas.add(line);
        canvas.renderAll();
        this.combineDocStatus = -1;
        cpa = false;
      }
    },
    addGrid() {
      let resolution = 100; //分辨率
      let numW = this.width / resolution;
      let numH = this.height / resolution;

      let docWidth = 4;
      let fillColor = "black";
      for (let i = 0; i < numW; i++) {
        for (let j = 0; j < numH; j++) {
          let id = i + "-" + j;
          let opt = {
            left: i * resolution,
            top: j * resolution,
            width: docWidth,
            height: docWidth,
            fillColor: fillColor,
            id: id,
            selectable: false,
          };
          let newRet = new fabric.Rect({
            left: i * resolution,
            top: j * resolution,
            width: docWidth,
            height: docWidth,
            fill: fillColor,
          });
          newRet.set("selectable", false);
          canvas.add(newRet);
        }
      }
    },
    addRoutes() {
      var circle = makeCircle(250, 125, []);
      var circle2 = makeCircle(250, 175, []);
      canvas.add(circle);
      canvas.add(circle2);
      var line = makeLine(
        [circle.left, circle.top, circle2.left, circle2.top], // 两点的 x y
        circle.id, //点1的id
        circle2.id //点2的id
      );
      canvas.add(line);

      circle.lines.push(line.id);
      circle2.lines.push(line.id);
    },
    addRobitic(item) {
      let that = this;
      let prefix = "/static/img/robotics/";
      fabric.Image.fromURL(prefix + item.img, function (oImg) {
        oImg.name = item.name;
        oImg.id = uuid();
        if (item.props) {
          oImg.props = item.props;
        }
        oImg.scale(0.3).set("flipX", false);
        oImg.controls["naviTo"] = makeNavigationControl(oImg, function (obj) {
          // 弹出可选目标
          let target = getObjectById(targetId); //TODO for test ,replace later
          console.log("target+++++++++++++++++++", target);
          let activeInstance = window.canvas.getActiveObject();
          that.doNavigation(activeInstance, target);
        });
        let obj = canvas.add(oImg);
        console.log(obj);

        //设置主题监听
        let moveTopic = window.topics.getTopic("/" + oImg.id + "/move");
        moveTopic.subscribe({
          next: function (msg) {
            that.move(msg);
          },
        });
      });
    },
    move(msg) {
      let id = msg.id;
      let target = msg.target;
      let targetObj = getObjectById(target);
      console.log("msg", msg);
      console.log("targetObj", targetObj);
      let left = targetObj.left;
      let top = targetObj.top;
      // TODO 添加上时间插值的代码
      setTimeout(() => {
        let obj = getObjectById(id);
        obj.set({ left: left, top: top });
        canvas.renderAll();
        let tpName = "/" + id + "/position";
        let positionTP = window.topics.getTopic(tpName);
        positionTP.next({ left: targetObj.left, top: targetObj.top });
      }, 500);
    },
    genPoints() {
      let points = [];
      let robots = [];
      let items = canvas._objects;
      for (let i = 0; i < items.length; i++) {
        const element = items[i];
        let data = element.toObject([
          "id",
          "angle",
          "start",
          "left",
          "top",
          "end",
          "lines",
          "selectable",
          "props",
        ]);
        data.xPercent = data.left / this.width;
        data.yPercent = data.top / this.height;
        if (element.type == "circle") {
          // console.log(element.id);
          points.push(data);
        } else if (element.type == "image") {
          robots.push(data);
        }
      }
      this.points = points;
      this.robots = robots;
    },

    doNavigation(machine, target) {
      // 使用 行为树

      // 让机器人找到最近的点，导航过去 （界面机器人移动过去，可设计由时间为参数的平滑算法）
      // 使用 Dijkstra 算法（全局），在道路的范围内找到最佳路径
      // 局部规划与执行算法 基于与x轴与y轴平行的算法
      // this.genPoints();

      let points = [];
      let items = canvas._objects;
      for (let i = 0; i < items.length; i++) {
        const element = items[i];
        if (element.type == "circle") {
          // console.log(element.id);
          points.push(
            element.toObject([
              "id",
              "start",
              "end",
              "lines",
              "selectable",
              "props",
            ])
          );
        }
      }

      var blackboard = {
        machine: machine.toObject([
          "id",
          "start",
          "end",
          "lines",
          "selectable",
          "props",
        ]),
        target: target.toObject([
          "id",
          "start",
          "end",
          "lines",
          "selectable",
          "props",
        ]),
        points,
        speed,
      };
      // console.log("blackboard", blackboard);

      doNavTask(blackboard);
    },
    getRoutePoints(points, target, routes) {
      return this.getRoutePoints();
    },
    calRotateX(sx, tx) {
      let result = tx - sx;
      if (result == 0) {
        return 0;
      } else if (result > 0) {
        return 90;
      } else {
        return 270;
      }
    },
    calRotateY(sy, ty) {
      let result = ty - sy;
      if (result == 0) {
        return 0;
      } else if (result > 0) {
        return 180;
      } else {
        return 0;
      }
    },
    logJSON() {
      var json = JSON.stringify(
        canvas.toObject(["id", "start", "end", "lines", "selectable", "props"])
      );
      localStorage.setItem("data", json);
    },
    loadJson() {
      let that = this;
      var json = localStorage.getItem("data");
      canvas.loadFromJSON(json);

      setTimeout(() => {
        let items = canvas._objects;
        console.log(items);
        for (let i = 0; i < items.length; i++) {
          const obj = items[i];
          if (!obj.id) {
            obj.id = uuid();
          }
          if (obj.type == "image") {
            //添加 导航至 控制功能
            obj.controls["naviTo"] = makeNavigationControl(obj, function (obj) {
              let target = getObjectById(targetId); //TODO for test ,replace later
              console.log("target+++++++++++++++++++", target);
              let activeInstance = window.canvas.getActiveObject();
              that.doNavigation(activeInstance, target);
            });
            obj.controls["delete"] = makeDeleteControl(obj, function (obj) {
              let activeInstance = window.canvas.getActiveObject();
              canvas.remove(activeInstance);
              canvas.renderAll();
            });
            //设置移动的主题监听
            let moveTopic = window.topics.getTopic("/" + obj.id + "/move");
            moveTopic.subscribe({
              next: function (msg) {
                console.log("moveTopic:", JSON.stringify(msg));
                that.move(msg);
              },
            });
          }
          if (obj.type == "circle") {
            //添加 增加控制点 控制功能
            obj.controls["addPoint"] = makeNewNavPointControl(function () {});
          }
        }
      }, 1000);
    },
  },

  mounted() {
    // localStorage.setItem("data",'{"version":"5.3.0","objects":[{"type":"circle","version":"5.3.0","originX":"center","originY":"center","left":250,"top":125,"width":24,"height":24,"fill":"#fff","stroke":"#666","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"radius":12,"startAngle":0,"endAngle":360,"id":"36acc3142d85024c9c284fc2ba003836","lines":["b8f1a13f1d2221471d1bec9129752bce","ffe6959f1f978141051b6fb128b0110b","b52b72086fc4b6445168308608b9a3dd"],"selectable":true},{"type":"circle","version":"5.3.0","originX":"center","originY":"center","left":249,"top":240.78,"width":24,"height":24,"fill":"#fff","stroke":"#666","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"radius":12,"startAngle":0,"endAngle":360,"id":"20c1889e06968043a60ad70049f25b35","lines":["b8f1a13f1d2221471d1bec9129752bce","29b2c8ae0effe0452a0876e048965c27","154831a3602f4640c268d8c6c8e6b838","1e48baf7f6ce5f4b3ff9a15f98e7f465"],"selectable":true},{"type":"line","version":"5.3.0","originX":"center","originY":"center","left":249.5,"top":182.89,"width":1,"height":115.78,"fill":"red","stroke":"red","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"id":"b8f1a13f1d2221471d1bec9129752bce","start":"36acc3142d85024c9c284fc2ba003836","end":"20c1889e06968043a60ad70049f25b35","selectable":false,"x1":0.4992199687987551,"x2":-0.4992199687987551,"y1":-57.89036544850498,"y2":57.89036544850498},{"type":"circle","version":"5.3.0","originX":"center","originY":"center","left":379.88,"top":127.16,"width":24,"height":24,"fill":"#fff","stroke":"#666","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"radius":12,"startAngle":0,"endAngle":360,"id":"39a97ba91706014d2619c1512c162f2e","lines":["ffe6959f1f978141051b6fb128b0110b","1cf72f0039e54346d339c1e3a1a766e5"],"selectable":true},{"type":"line","version":"5.3.0","originX":"center","originY":"center","left":314.94,"top":126.08,"width":129.88,"height":2.16,"fill":"red","stroke":"red","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"id":"ffe6959f1f978141051b6fb128b0110b","start":"36acc3142d85024c9c284fc2ba003836","end":"39a97ba91706014d2619c1512c162f2e","selectable":false,"x1":-64.93759750390015,"x2":64.93759750390015,"y1":-1.0797342192691133,"y2":1.0797342192691133},{"type":"circle","version":"5.3.0","originX":"center","originY":"center","left":507.75,"top":128.32,"width":24,"height":24,"fill":"#fff","stroke":"#666","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"radius":12,"startAngle":0,"endAngle":360,"id":"d2c1a0c54b91f443104b94f424dec28c","lines":["1cf72f0039e54346d339c1e3a1a766e5","dde5620a9c909945e09a8ab991503046","c4040995a7495a41b4a8241ab0db9dda"],"selectable":true},{"type":"line","version":"5.3.0","originX":"center","originY":"center","left":443.81,"top":127.74,"width":127.88,"height":1.16,"fill":"red","stroke":"red","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"id":"1cf72f0039e54346d339c1e3a1a766e5","start":"39a97ba91706014d2619c1512c162f2e","end":"d2c1a0c54b91f443104b94f424dec28c","selectable":false,"x1":-63.93915756630267,"x2":63.93915756630267,"y1":-0.5813953488372192,"y2":0.5813953488372192},{"type":"circle","version":"5.3.0","originX":"center","originY":"center","left":647.61,"top":130.48,"width":24,"height":24,"fill":"#fff","stroke":"#666","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"radius":12,"startAngle":0,"endAngle":360,"id":"bd0ae026a63e6a44f0a9b61a6352220c","lines":["dde5620a9c909945e09a8ab991503046","f1c5c27f38ebe34e93384b53ea77f7d1"],"selectable":true},{"type":"line","version":"5.3.0","originX":"center","originY":"center","left":577.68,"top":129.4,"width":139.86,"height":2.16,"fill":"red","stroke":"red","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"id":"dde5620a9c909945e09a8ab991503046","start":"d2c1a0c54b91f443104b94f424dec28c","end":"bd0ae026a63e6a44f0a9b61a6352220c","selectable":false,"x1":-69.92979719188764,"x2":69.92979719188764,"y1":-1.079734219269099,"y2":1.079734219269099},{"type":"circle","version":"5.3.0","originX":"center","originY":"center","left":778.49,"top":130.65,"width":24,"height":24,"fill":"#fff","stroke":"#666","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"radius":12,"startAngle":0,"endAngle":360,"id":"6a07e2b58b69c846e088e0e84d1ecb3c","lines":["f1c5c27f38ebe34e93384b53ea77f7d1","23db7874c2ff7c4c90cb41cc332c3ab9","6df03a241c37d1458c1bfff173ffb6c8"],"selectable":true},{"type":"line","version":"5.3.0","originX":"center","originY":"center","left":713.05,"top":130.56,"width":130.87,"height":0.17,"fill":"red","stroke":"red","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"id":"f1c5c27f38ebe34e93384b53ea77f7d1","start":"bd0ae026a63e6a44f0a9b61a6352220c","end":"6a07e2b58b69c846e088e0e84d1ecb3c","selectable":false,"x1":-65.43681747269886,"x2":65.43681747269886,"y1":-0.08305647840531094,"y2":0.08305647840531094},{"type":"circle","version":"5.3.0","originX":"center","originY":"center","left":889.39,"top":130.81,"width":24,"height":24,"fill":"#fff","stroke":"#666","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"radius":12,"startAngle":0,"endAngle":360,"id":"1b0e5a704130844bd349c754d98e1bb1","lines":["23db7874c2ff7c4c90cb41cc332c3ab9","280c92a7a0903a487eaa66ca838afb79","de69f91b8e25b8473f88c228249f70cf"],"selectable":true},{"type":"line","version":"5.3.0","originX":"center","originY":"center","left":833.94,"top":130.73,"width":110.9,"height":0.17,"fill":"red","stroke":"red","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"id":"23db7874c2ff7c4c90cb41cc332c3ab9","start":"6a07e2b58b69c846e088e0e84d1ecb3c","end":"1b0e5a704130844bd349c754d98e1bb1","selectable":false,"x1":-55.452418096723875,"x2":55.452418096723875,"y1":-0.08305647840531094,"y2":0.08305647840531094},{"type":"circle","version":"5.3.0","originX":"center","originY":"center","left":380.87,"top":242.94,"width":24,"height":24,"fill":"#fff","stroke":"#666","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"radius":12,"startAngle":0,"endAngle":360,"id":"36a031f1b4216b4b38b8998beaa10f83","lines":["29b2c8ae0effe0452a0876e048965c27","d4b0dd1c07e16042fb08ae208c636dc9"],"selectable":true},{"type":"line","version":"5.3.0","originX":"center","originY":"center","left":314.94,"top":241.86,"width":131.87,"height":2.16,"fill":"red","stroke":"red","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"id":"29b2c8ae0effe0452a0876e048965c27","start":"20c1889e06968043a60ad70049f25b35","end":"36a031f1b4216b4b38b8998beaa10f83","selectable":false,"x1":-65.93603744149767,"x2":65.93603744149767,"y1":-1.079734219269099,"y2":1.079734219269099},{"type":"circle","version":"5.3.0","originX":"center","originY":"center","left":514.74,"top":244.1,"width":24,"height":24,"fill":"#fff","stroke":"#666","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"radius":12,"startAngle":0,"endAngle":360,"id":"24f92f9b8addb8441e8820f8db30c1ab","lines":["d4b0dd1c07e16042fb08ae208c636dc9","86237f305cadc545185bf9657e2edca1","c4040995a7495a41b4a8241ab0db9dda","519f637b2f1682431c283a92ff98d9c8"],"selectable":true},{"type":"line","version":"5.3.0","originX":"center","originY":"center","left":447.81,"top":243.52,"width":133.87,"height":1.16,"fill":"red","stroke":"red","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"id":"d4b0dd1c07e16042fb08ae208c636dc9","start":"36a031f1b4216b4b38b8998beaa10f83","end":"24f92f9b8addb8441e8820f8db30c1ab","selectable":false,"x1":-66.9344773790952,"x2":66.9344773790952,"y1":-0.5813953488372192,"y2":0.5813953488372192},{"type":"circle","version":"5.3.0","originX":"center","originY":"center","left":649.61,"top":248.26,"width":24,"height":24,"fill":"#fff","stroke":"#666","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"radius":12,"startAngle":0,"endAngle":360,"id":"0aed5bf52595d24d382868c248df5d38","lines":["86237f305cadc545185bf9657e2edca1","61c7aae69df109422f983c797f0b2cf6"],"selectable":true},{"type":"line","version":"5.3.0","originX":"center","originY":"center","left":582.18,"top":246.18,"width":134.87,"height":4.15,"fill":"red","stroke":"red","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"id":"86237f305cadc545185bf9657e2edca1","start":"24f92f9b8addb8441e8820f8db30c1ab","end":"0aed5bf52595d24d382868c248df5d38","selectable":false,"x1":-67.43369734789388,"x2":67.43369734789388,"y1":-2.076411960132873,"y2":2.076411960132873},{"type":"circle","version":"5.3.0","originX":"center","originY":"center","left":783.48,"top":248.42,"width":24,"height":24,"fill":"#fff","stroke":"#666","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"radius":12,"startAngle":0,"endAngle":360,"id":"8f41c1f1ebfa4e49cfe8f2ee18b57031","lines":["61c7aae69df109422f983c797f0b2cf6","6b94e646f51ddf469bfa269f3b120f6f","6df03a241c37d1458c1bfff173ffb6c8","c3bc3bd3dea48d4ae5dbac9d5aff93e7"],"selectable":true},{"type":"line","version":"5.3.0","originX":"center","originY":"center","left":716.54,"top":248.34,"width":133.87,"height":0.17,"fill":"red","stroke":"red","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"id":"61c7aae69df109422f983c797f0b2cf6","start":"0aed5bf52595d24d382868c248df5d38","end":"8f41c1f1ebfa4e49cfe8f2ee18b57031","selectable":false,"x1":-66.9344773790952,"x2":66.9344773790952,"y1":-0.08305647840529673,"y2":0.08305647840529673},{"type":"circle","version":"5.3.0","originX":"center","originY":"center","left":894.38,"top":247.59,"width":24,"height":24,"fill":"#fff","stroke":"#666","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"radius":12,"startAngle":0,"endAngle":360,"id":"2edafb74f1315f4f07f884ff18dc7239","lines":["6b94e646f51ddf469bfa269f3b120f6f","fc86209d1f6471485a1a23c18b84116a"],"selectable":true},{"type":"line","version":"5.3.0","originX":"center","originY":"center","left":838.93,"top":248.01,"width":110.9,"height":0.83,"fill":"red","stroke":"red","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"id":"6b94e646f51ddf469bfa269f3b120f6f","start":"8f41c1f1ebfa4e49cfe8f2ee18b57031","end":"2edafb74f1315f4f07f884ff18dc7239","selectable":false,"x1":-55.452418096723875,"x2":55.452418096723875,"y1":0.41528239202659734,"y2":-0.41528239202659734},{"type":"circle","version":"5.3.0","originX":"center","originY":"center","left":1066.19,"top":249.75,"width":24,"height":24,"fill":"#fff","stroke":"#666","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"radius":12,"startAngle":0,"endAngle":360,"id":"388e7e28a8b69a4336a8143a5ef58096","lines":["fc86209d1f6471485a1a23c18b84116a","f75cc85009278042ac0a750064bb547e","f52566203e630344293849b36d2e7c6f","ba094d4182eb1847e689add8e1128efd"],"selectable":true},{"type":"line","version":"5.3.0","originX":"center","originY":"center","left":980.29,"top":248.67,"width":171.81,"height":2.16,"fill":"red","stroke":"red","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"id":"fc86209d1f6471485a1a23c18b84116a","start":"2edafb74f1315f4f07f884ff18dc7239","end":"388e7e28a8b69a4336a8143a5ef58096","selectable":false,"x1":-85.9048361934477,"x2":85.9048361934477,"y1":-1.0797342192690849,"y2":1.0797342192690849},{"type":"circle","version":"5.3.0","originX":"center","originY":"center","left":1074.18,"top":130.98,"width":24,"height":24,"fill":"#fff","stroke":"#666","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"radius":12,"startAngle":0,"endAngle":360,"id":"cdd63eb514af31430a1a3ef1092cf9cb","lines":["280c92a7a0903a487eaa66ca838afb79","f75cc85009278042ac0a750064bb547e","9fd54b57e361fe4774e8a71e0056ad18"],"selectable":true},{"type":"line","version":"5.3.0","originX":"center","originY":"center","left":981.79,"top":130.9,"width":184.79,"height":0.17,"fill":"red","stroke":"red","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"id":"280c92a7a0903a487eaa66ca838afb79","start":"1b0e5a704130844bd349c754d98e1bb1","end":"cdd63eb514af31430a1a3ef1092cf9cb","selectable":false,"x1":-92.3946957878315,"x2":92.3946957878315,"y1":-0.08305647840531094,"y2":0.08305647840531094},{"type":"circle","version":"5.3.0","originX":"center","originY":"center","left":247.08,"top":390.45,"width":24,"height":24,"fill":"#fff","stroke":"#666","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"radius":12,"startAngle":0,"endAngle":360,"id":"370acef8d2ef9d4045d9faed818bbdc7","lines":["154831a3602f4640c268d8c6c8e6b838","7ea30e21572065475b58f49592aa0c5e","3cf54885685d364e706a8236646a63d9","91678521dd9f4d4b95d804bd7f0650cf"],"selectable":true},{"type":"line","version":"5.3.0","originX":"center","originY":"center","left":248.04,"top":315.61,"width":1.92,"height":149.67,"fill":"red","stroke":"red","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"id":"154831a3602f4640c268d8c6c8e6b838","start":"20c1889e06968043a60ad70049f25b35","end":"370acef8d2ef9d4045d9faed818bbdc7","selectable":false,"x1":0.9594383775350934,"x2":-0.9594383775350934,"y1":-74.83388704318938,"y2":74.83388704318938},{"type":"circle","version":"5.3.0","originX":"center","originY":"center","left":386.94,"top":392.61,"width":24,"height":24,"fill":"#fff","stroke":"#666","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"radius":12,"startAngle":0,"endAngle":360,"id":"520dd6e53e64e345b93831d3a138a0e8","lines":["7ea30e21572065475b58f49592aa0c5e","1ae88c796da2b640fb68eeb66b064c6d"],"selectable":true},{"type":"line","version":"5.3.0","originX":"center","originY":"center","left":317.01,"top":391.53,"width":139.86,"height":2.16,"fill":"red","stroke":"red","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"id":"7ea30e21572065475b58f49592aa0c5e","start":"370acef8d2ef9d4045d9faed818bbdc7","end":"520dd6e53e64e345b93831d3a138a0e8","selectable":false,"x1":-69.92979719188772,"x2":69.92979719188772,"y1":-1.0797342192691133,"y2":1.0797342192691133},{"type":"circle","version":"5.3.0","originX":"center","originY":"center","left":517.82,"top":394.77,"width":24,"height":24,"fill":"#fff","stroke":"#666","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"radius":12,"startAngle":0,"endAngle":360,"id":"a7c1f0a32b39d24e90284a72e11c9c0e","lines":["1ae88c796da2b640fb68eeb66b064c6d","c69482a1ca67ec4427c9430ca59d529f","519f637b2f1682431c283a92ff98d9c8"],"selectable":true},{"type":"line","version":"5.3.0","originX":"center","originY":"center","left":452.38,"top":393.69,"width":130.87,"height":2.16,"fill":"red","stroke":"red","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"id":"1ae88c796da2b640fb68eeb66b064c6d","start":"520dd6e53e64e345b93831d3a138a0e8","end":"a7c1f0a32b39d24e90284a72e11c9c0e","selectable":false,"x1":-65.43681747269892,"x2":65.43681747269892,"y1":-1.0797342192691133,"y2":1.0797342192691133},{"type":"circle","version":"5.3.0","originX":"center","originY":"center","left":650.69,"top":396.93,"width":24,"height":24,"fill":"#fff","stroke":"#666","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"radius":12,"startAngle":0,"endAngle":360,"id":"fb98ad971d1ab143b51b12c18ea11484","lines":["c69482a1ca67ec4427c9430ca59d529f","b8a6d30b9bfef94faa998f795edcf30f"],"selectable":true},{"type":"line","version":"5.3.0","originX":"center","originY":"center","left":584.25,"top":395.85,"width":132.87,"height":2.16,"fill":"red","stroke":"red","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"id":"c69482a1ca67ec4427c9430ca59d529f","start":"a7c1f0a32b39d24e90284a72e11c9c0e","end":"fb98ad971d1ab143b51b12c18ea11484","selectable":false,"x1":-66.4352574102964,"x2":66.4352574102964,"y1":-1.0797342192691133,"y2":1.0797342192691133},{"type":"circle","version":"5.3.0","originX":"center","originY":"center","left":793.54,"top":399.09,"width":24,"height":24,"fill":"#fff","stroke":"#666","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"radius":12,"startAngle":0,"endAngle":360,"id":"b8fbfaa0cbaa6c4407c8f9bcb6b60b3f","lines":["b8a6d30b9bfef94faa998f795edcf30f","9052af40dd88ed41add8b97d2551c236","c3bc3bd3dea48d4ae5dbac9d5aff93e7"],"selectable":true},{"type":"line","version":"5.3.0","originX":"center","originY":"center","left":722.11,"top":398.01,"width":142.85,"height":2.16,"fill":"red","stroke":"red","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"id":"b8a6d30b9bfef94faa998f795edcf30f","start":"fb98ad971d1ab143b51b12c18ea11484","end":"b8fbfaa0cbaa6c4407c8f9bcb6b60b3f","selectable":false,"x1":-71.42745709828392,"x2":71.42745709828392,"y1":-1.0797342192691133,"y2":1.0797342192691133},{"type":"circle","version":"5.3.0","originX":"center","originY":"center","left":901.45,"top":397.26,"width":24,"height":24,"fill":"#fff","stroke":"#666","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"radius":12,"startAngle":0,"endAngle":360,"id":"384c69129955f945c49b61a9fa225133","lines":["9052af40dd88ed41add8b97d2551c236","d327a5db34d8734edc3a93e301b7714b"],"selectable":true},{"type":"line","version":"5.3.0","originX":"center","originY":"center","left":847.5,"top":398.17,"width":107.91,"height":1.83,"fill":"red","stroke":"red","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"id":"9052af40dd88ed41add8b97d2551c236","start":"b8fbfaa0cbaa6c4407c8f9bcb6b60b3f","end":"384c69129955f945c49b61a9fa225133","selectable":false,"x1":-53.954758190327595,"x2":53.954758190327595,"y1":0.9136212624584914,"y2":-0.9136212624584914},{"type":"circle","version":"5.3.0","originX":"center","originY":"center","left":1069.27,"top":399.42,"width":24,"height":24,"fill":"#fff","stroke":"#666","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"radius":12,"startAngle":0,"endAngle":360,"id":"3ae2c25fb8f1fb40b5b83f4b64cf9c75","lines":["d327a5db34d8734edc3a93e301b7714b","f52566203e630344293849b36d2e7c6f","aa68595e85ae884a4b897958e29fa940"],"selectable":true},{"type":"line","version":"5.3.0","originX":"center","originY":"center","left":985.36,"top":398.34,"width":167.82,"height":2.16,"fill":"red","stroke":"red","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"id":"d327a5db34d8734edc3a93e301b7714b","start":"384c69129955f945c49b61a9fa225133","end":"3ae2c25fb8f1fb40b5b83f4b64cf9c75","selectable":false,"x1":-83.90795631825262,"x2":83.90795631825262,"y1":-1.0797342192691133,"y2":1.0797342192691133},{"type":"line","version":"5.3.0","originX":"center","originY":"center","left":511.25,"top":186.21,"width":6.99,"height":115.78,"fill":"red","stroke":"red","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"id":"c4040995a7495a41b4a8241ab0db9dda","start":"d2c1a0c54b91f443104b94f424dec28c","end":"24f92f9b8addb8441e8820f8db30c1ab","selectable":false,"x1":-3.4945397815912997,"x2":3.4945397815912997,"y1":-57.890365448504966,"y2":57.890365448504966},{"type":"line","version":"5.3.0","originX":"center","originY":"center","left":516.28,"top":319.44,"width":3.07,"height":150.66,"fill":"red","stroke":"red","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"id":"519f637b2f1682431c283a92ff98d9c8","start":"24f92f9b8addb8441e8820f8db30c1ab","end":"a7c1f0a32b39d24e90284a72e11c9c0e","selectable":false,"x1":-1.5366614664586677,"x2":1.5366614664586677,"y1":-75.33222591362129,"y2":75.33222591362129},{"type":"line","version":"5.3.0","originX":"center","originY":"center","left":780.98,"top":189.53,"width":4.99,"height":117.77,"fill":"red","stroke":"red","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"id":"6df03a241c37d1458c1bfff173ffb6c8","start":"6a07e2b58b69c846e088e0e84d1ecb3c","end":"8f41c1f1ebfa4e49cfe8f2ee18b57031","selectable":false,"x1":-2.496099843993875,"x2":2.496099843993875,"y1":-58.887043189368725,"y2":58.887043189368725},{"type":"line","version":"5.3.0","originX":"center","originY":"center","left":788.51,"top":323.75,"width":10.06,"height":150.66,"fill":"red","stroke":"red","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"id":"c3bc3bd3dea48d4ae5dbac9d5aff93e7","start":"8f41c1f1ebfa4e49cfe8f2ee18b57031","end":"b8fbfaa0cbaa6c4407c8f9bcb6b60b3f","selectable":false,"x1":-5.031201248049911,"x2":5.031201248049911,"y1":-75.33222591362134,"y2":75.33222591362134},{"type":"line","version":"5.3.0","originX":"center","originY":"center","left":1070.19,"top":190.37,"width":7.99,"height":118.77,"fill":"red","stroke":"red","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"id":"f75cc85009278042ac0a750064bb547e","start":"cdd63eb514af31430a1a3ef1092cf9cb","end":"388e7e28a8b69a4336a8143a5ef58096","selectable":false,"x1":3.993759750389927,"x2":-3.993759750389927,"y1":-59.38538205980059,"y2":59.38538205980059},{"type":"line","version":"5.3.0","originX":"center","originY":"center","left":1067.73,"top":324.58,"width":3.07,"height":149.67,"fill":"red","stroke":"red","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"id":"f52566203e630344293849b36d2e7c6f","start":"3ae2c25fb8f1fb40b5b83f4b64cf9c75","end":"388e7e28a8b69a4336a8143a5ef58096","selectable":false,"x1":1.536661466458554,"x2":-1.536661466458554,"y1":74.83388704318948,"y2":-74.83388704318948},{"type":"circle","version":"5.3.0","originX":"center","originY":"center","left":1141.23,"top":402.58,"width":24,"height":24,"fill":"#fff","stroke":"#666","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"radius":12,"startAngle":0,"endAngle":360,"id":"95e9a53f1c3f9143dd1899d10a29fb0e","lines":["aa68595e85ae884a4b897958e29fa940"],"selectable":true},{"type":"line","version":"5.3.0","originX":"center","originY":"center","left":1105.25,"top":401,"width":71.96,"height":3.16,"fill":"red","stroke":"red","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"id":"aa68595e85ae884a4b897958e29fa940","start":"3ae2c25fb8f1fb40b5b83f4b64cf9c75","end":"95e9a53f1c3f9143dd1899d10a29fb0e","selectable":false,"x1":-35.98052262090482,"x2":35.98052262090482,"y1":-1.5783222591362005,"y2":1.5783222591362005},{"type":"circle","version":"5.3.0","originX":"center","originY":"center","left":1145.15,"top":250.91,"width":24,"height":24,"fill":"#fff","stroke":"#666","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"radius":12,"startAngle":0,"endAngle":360,"id":"8f435782f68a4f4d7bfb8c7fa2c060a3","lines":["ba094d4182eb1847e689add8e1128efd"],"selectable":true},{"type":"line","version":"5.3.0","originX":"center","originY":"center","left":1105.67,"top":250.33,"width":78.96,"height":1.16,"fill":"red","stroke":"red","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"id":"ba094d4182eb1847e689add8e1128efd","start":"388e7e28a8b69a4336a8143a5ef58096","end":"8f435782f68a4f4d7bfb8c7fa2c060a3","selectable":false,"x1":-39.48052262090482,"x2":39.48052262090482,"y1":-0.5799999999999983,"y2":0.5799999999999983},{"type":"circle","version":"5.3.0","originX":"center","originY":"center","left":1153.13,"top":131.15,"width":24,"height":24,"fill":"#fff","stroke":"#666","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"radius":12,"startAngle":0,"endAngle":360,"id":"18f026fbad599a4622a8395a541f3d55","lines":["9fd54b57e361fe4774e8a71e0056ad18"],"selectable":true},{"type":"line","version":"5.3.0","originX":"center","originY":"center","left":1113.66,"top":131.06,"width":78.95,"height":0.17,"fill":"red","stroke":"red","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"id":"9fd54b57e361fe4774e8a71e0056ad18","start":"cdd63eb514af31430a1a3ef1092cf9cb","end":"18f026fbad599a4622a8395a541f3d55","selectable":false,"x1":-39.4774024960999,"x2":39.4774024960999,"y1":-0.08500000000000796,"y2":0.08500000000000796},{"type":"circle","version":"5.3.0","originX":"center","originY":"center","left":151.24,"top":125.17,"width":24,"height":24,"fill":"#fff","stroke":"#666","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"radius":12,"startAngle":0,"endAngle":360,"id":"1c8ef2a389033844718894e831feed5b","lines":["b52b72086fc4b6445168308608b9a3dd"],"selectable":true},{"type":"line","version":"5.3.0","originX":"center","originY":"center","left":200.62,"top":125.08,"width":98.76,"height":0.17,"fill":"red","stroke":"red","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"id":"b52b72086fc4b6445168308608b9a3dd","start":"36acc3142d85024c9c284fc2ba003836","end":"1c8ef2a389033844718894e831feed5b","selectable":false,"x1":49.38152106084242,"x2":-49.38152106084242,"y1":-0.08333887043189492,"y2":0.08333887043189492},{"type":"circle","version":"5.3.0","originX":"center","originY":"center","left":185.18,"top":239.95,"width":24,"height":24,"fill":"#fff","stroke":"#666","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"radius":12,"startAngle":0,"endAngle":360,"id":"ddd2c2b4702da74c45784c477feff4f2","lines":["1e48baf7f6ce5f4b3ff9a15f98e7f465"],"selectable":true},{"type":"line","version":"5.3.0","originX":"center","originY":"center","left":217.09,"top":240.37,"width":63.82,"height":0.83,"fill":"red","stroke":"red","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"id":"1e48baf7f6ce5f4b3ff9a15f98e7f465","start":"20c1889e06968043a60ad70049f25b35","end":"ddd2c2b4702da74c45784c477feff4f2","selectable":false,"x1":31.908042121684858,"x2":-31.908042121684858,"y1":0.41500000000000625,"y2":-0.41500000000000625},{"type":"circle","version":"5.3.0","originX":"center","originY":"center","left":147.32,"top":389.62,"width":24,"height":24,"fill":"#fff","stroke":"#666","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"radius":12,"startAngle":0,"endAngle":360,"id":"d53e3a9fe01a1e4bb1e8843e07d10b75","lines":["3cf54885685d364e706a8236646a63d9"],"selectable":true},{"type":"line","version":"5.3.0","originX":"center","originY":"center","left":197.2,"top":390.03,"width":99.76,"height":0.83,"fill":"red","stroke":"red","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"id":"3cf54885685d364e706a8236646a63d9","start":"370acef8d2ef9d4045d9faed818bbdc7","end":"d53e3a9fe01a1e4bb1e8843e07d10b75","selectable":false,"x1":49.87964118564743,"x2":-49.87964118564743,"y1":0.416661129568098,"y2":-0.416661129568098},{"type":"circle","version":"5.3.0","originX":"center","originY":"center","left":245.16,"top":533.14,"width":24,"height":24,"fill":"#fff","stroke":"#666","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"radius":12,"startAngle":0,"endAngle":360,"id":"6906dbe05ce63540d55b8055d9350640","lines":["91678521dd9f4d4b95d804bd7f0650cf"],"selectable":true},{"type":"line","version":"5.3.0","originX":"center","originY":"center","left":246.12,"top":461.79,"width":1.92,"height":142.69,"fill":"red","stroke":"red","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"id":"91678521dd9f4d4b95d804bd7f0650cf","start":"370acef8d2ef9d4045d9faed818bbdc7","end":"6906dbe05ce63540d55b8055d9350640","selectable":false,"x1":0.9594383775350934,"x2":-0.9594383775350934,"y1":-71.34551495016609,"y2":71.34551495016609},{"type":"circle","version":"5.3.0","originX":"center","originY":"center","left":889.47,"top":43.27,"width":24,"height":24,"fill":"#fff","stroke":"#666","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"radius":12,"startAngle":0,"endAngle":360,"id":"695d4c0c73a45745cf7acd978449958b","lines":["de69f91b8e25b8473f88c228249f70cf"],"selectable":true},{"type":"line","version":"5.3.0","originX":"center","originY":"center","left":889.43,"top":87.04,"width":0.08,"height":87.54,"fill":"red","stroke":"red","strokeWidth":5,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"id":"de69f91b8e25b8473f88c228249f70cf","start":"1b0e5a704130844bd349c754d98e1bb1","end":"695d4c0c73a45745cf7acd978449958b","selectable":false,"x1":-0.03900156006238831,"x2":0.03900156006238831,"y1":43.770764119601324,"y2":-43.770764119601324},{"type":"image","version":"5.3.0","originX":"center","originY":"center","left":34.94,"top":389.7,"width":392,"height":230,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":0.3,"scaleY":0.3,"angle":0,"flipX":true,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"cropX":0,"cropY":0,"id":"25f520a64fb3944c13483a64ebd659c0","selectable":true,"src":"http://localhost:8080/static/img/robotics/2.png","crossOrigin":null,"filters":[]},{"type":"image","version":"5.3.0","originX":"center","originY":"center","left":1217.52,"top":390.79,"width":112,"height":114,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":0.91,"scaleY":0.91,"angle":0,"flipX":true,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"cropX":0,"cropY":0,"id":"2922d97b4f2ca44560491d94564324ca","selectable":true,"src":"http://localhost:8080/static/img/robotics/mbox.png","crossOrigin":null,"filters":[]},{"type":"image","version":"5.3.0","originX":"center","originY":"center","left":140.8,"top":384.63,"width":352,"height":395,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":0.3,"scaleY":0.3,"angle":180,"flipX":false,"flipY":true,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"cropX":0,"cropY":0,"id":"db3d3bfc9044394b9b9807897848bf98","selectable":true,"src":"http://localhost:8080/static/img/robotics/mrobot1.png","crossOrigin":null,"filters":[]},{"type":"image","version":"5.3.0","originX":"center","originY":"center","left":59.35,"top":126.64,"width":112,"height":114,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":0.86,"scaleY":0.86,"angle":0,"flipX":true,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"cropX":0,"cropY":0,"id":"1cea219bc1391c4637cb646c635e05bb","selectable":true,"props":{"charger":false},"src":"http://localhost:8080/static/img/robotics/mbox.png","crossOrigin":null,"filters":[]},{"type":"image","version":"5.3.0","originX":"center","originY":"center","left":1209.58,"top":93.72,"width":112,"height":114,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":0.81,"scaleY":0.81,"angle":0,"flipX":true,"flipY":false,"opacity":1,"shadow":null,"visible":true,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"cropX":0,"cropY":0,"id":"6894b7185367a54b4f58bd953abe5914","selectable":true,"props":{"charger":false},"src":"http://localhost:8080/static/img/robotics/mbox.png","crossOrigin":null,"filters":[]}]}')
    window.canvas = this.__canvas = new fabric.Canvas("c");
    let canvas = window.canvas;

    this.width = width;
    this.height = height;

    canvas.on("object:moving", function (e) {
      var p = e.target;
      if (p.type == "circle") {
        console.log(p.id);
        let lines = p.lines;
        for (let i = 0; i < lines.length; i++) {
          const id = lines[i];
          var line = getObjectById(id);
          var start = getObjectById(line.start);
          var end = getObjectById(line.end);
          if (line.start == p.id) {
            line.set({ x1: p.left, y1: p.top });
            line.set({ x2: end.left, y2: end.top });
          } else if (line.end == p.id) {
            line.set({ x1: start.left, y1: start.top });
            line.set({ x2: p.left, y2: p.top });
          }
        }
        canvas.renderAll();
      }
    });

    this.loadJson();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
